import React, {Component} from 'react';
import {screenWidth} from "../utils/StylesUtils";
import * as colors from '../utils/ColorUtils';
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native';
import ScrollableTabView,
{ScrollableTabBar}
    from 'react-native-scrollable-tab-view';
import {Actions} from "react-native-router-flux";
import SortArticlePage from "../ui/SortArticlePage"


export default class SortDetailPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let names = [];
        for (let a of this.props.item.children) {
            names.push(a.name);
        }

        return (
            <View style={styles.container}>
                <View style={styles.container_01}>
                    <TouchableOpacity onPress={() => Actions.pop()}>
                        <Image style={styles.back} source={{uri: 'icon_back'}}/>
                    </TouchableOpacity>
                    <Text style={styles.title} ellipsizeMode='tail'
                          numberOfLines={1}>{this.props.title}</Text>
                </View>
                <View style={styles.container_02}>
                    <ScrollableTabView
                        renderTabBar={() => <ScrollableTabBar/>}
                        tabBarBackgroundColor='#fff'
                        tabBarActiveTextColor='#1296db'
                        tabBarInactiveTextColor='#666'
                        tabBarUnderlineStyle={styles.tabBarUnderline}
                    >
                        {
                            this.props.item.children.map((item, index) => {
                                return (<SortArticlePage tabLabel={item.name} item={item} index={index} key={index}/>)
                            })
                        }
                    </ScrollableTabView>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.colorBg,
        flexDirection: "column",
        alignItems: "center"
    },
    container_01: {
        width: screenWidth,
        height: 50,
        backgroundColor: colors.white,
        flexDirection: 'row',
        alignItems: "center",
    },
    container_02: {flex: 1, marginTop: 1, width: screenWidth, backgroundColor: colors.transparent},
    back: {width: 25, height: 25, marginLeft: 10},
    title: {
        width: screenWidth - 40,
        color: colors.colorTheme,
        fontSize: 14,
        marginRight: 10
    },
    tabBarUnderline: {
        backgroundColor: colors.colorTheme,
        height: 2,
    }
});